<template>
  <div>
      <div class="box1">
          <div class="addInsert">
          <!-- <h3>添加地址</h3> -->
          <div class="addInsert-list">
              <ul class="addInsert-listone">
                  <li class="clearfix" v-for="(ad,av) in wadd1" :key="av">
                      <label class="addInsert-label"><i v-show="av!=4">*</i>{{ad.label}}</label>
                      <!-- <template v-for="(ad1,av1) in ad.input"> -->
                          <span v-for="(ad1,av1) in ad.input" :key="av1">
                              <!-- 收货人姓名 -->
                               <input v-if="av==0" type="text" v-model="ad1.names" :placeholder="ad1.in"/>
                                <!-- 省市县 -->
                                <input @click="dres1(0)" readonly v-if="av==1&&av1==0" type="text" v-model="ad1.oblast" :placeholder="ad1.in"/>
                                <input @click="dres1(1)" readonly v-if="av==1&&av1==1" type="text" v-model="ad1.city" :placeholder="ad1.in"/>
                                <input @click="dres1(2)" readonly v-if="av==1&&av1==2"  type="text" v-model="ad1.country" :placeholder="ad1.in"/>
                                <!-- readonly -->
                                <em v-if="av==1" class="icvn"></em>
                                <!-- 详细地址 -->
                               <input v-if="av==2" type="text" v-model="ad1.detail" :placeholder="ad1.in"/>
                               <!-- 电话 -->
                               <input v-if="av==3" type="text" @blur="goPhone($event)" v-model="ad1.phone" :placeholder="ad1.in"/>
                               <!-- 座机 -->
                               <input v-if="av==4&&av1==0" class="gphone1" type="text" v-model="ad1.stel1" :placeholder="ad1.in" />
                               <i v-if="av==4&&av1<1"> -  </i>
                               <input v-if="av==4&&av1==1" class="gphone2" type="text" v-model="ad1.stel2" :placeholder="ad1.in" />
                          </span>
                      <!-- </template> -->
                      <div class="sanld0" v-if="av==1" v-show="!addBol[0]">
                            <template v-for="(it1,iv2) in addr">
                                <div :key="iv2" @click="change1(iv2)">{{it1.name}}</div>
                            </template>
                      </div>
                      <div class="sanld1" v-if="av==1" v-show="!addBol[1]">
                            <template v-for="(sit1,c1) in aa1">
                                <div :key="c1" @click="change2(c1)">{{sit1.name}}</div>
                            </template>
                      </div>
                      <div class="sanld2" v-if="av==1" v-show="!addBol[2]">
                            <template v-for="(sit2,c2) in aa2">
                                <div :key="c2" @click="change3(c2)">{{sit2.name}}</div>
                            </template>
                      </div>
                  </li>
              </ul>
          </div>
        <!-- tan1 -->
        <div class="one">
            <h3><i class="oneicon"></i>设置为常用地址</h3>
            <div class="oneTo">
                <span @click="addNo()">返回</span>
                <span @click="addYes()">确定</span>
            </div>
        </div>
      </div>
  </div>
  <!-- 地址弹框 -->
  </div>
</template>

<script>
import axios from 'axios';
export default {
    name:'Sadd',
    data(){
        return{
            addr:[],
            aa1:[],
            aa2:[],
            addBol:[true,true,true],
            wadd1:this.$store.state.wadd1,
        }
    },
    beforeMount(){
        this.datas();
    },
    mounted(){

    },
    methods:{
        datas(){
          axios.get('/add.json').then(res => {     // 获取public下的test.json文件数据
            this.addr=res.data;
          });
      },
        addYes(){
            var list=this.wadd1[1].input;
            var a1=this.wadd1[1].input[0].oblast,
            a2=this.wadd1[1].input[1].city,
            a3=this.wadd1[1].input[2].country,
            a4=this.wadd1[2].input[0].detail;
            var str=a1+" "+a2+" "+a3+" "+a4;
            console.log(str);
            var obj={
                realName:this.wadd1[0].input[0].names,
                phone:this.wadd1[3].input[0].phone,
                address:str,
                zipCode:'101010',
            }
            axios({
                method:'post',
                url:'/api/small/user/verify/v1/addReceiveAddress',
                params:obj,
                headers:{
                    userId:this.$store.state.obj[0].userId,
                    sessionId:this.$store.state.obj[0].sessionId
                }
            }).then(res=>{
                console.log(res.data);
            });
        },
        // 判断电话号
        goPhone(e){
            let reg = /^1[34578]\d{9}$/
            var value = e.target.value;
            if (reg.test(value)) {
                 this.wadd1[3].input[0].phone = value;
                //  this.txt = '';
             }else if(!reg.test(value)) {
                //  this.txt = '格式错误';
                 alert('格式错误');
             }
        },
        addNo(){
            console.log(this.$store.state.wadd1);
        },
        dres1(s){
            if(s==0){
                this.aa2=[];
                this.item3=[];
                this.aa1=this.addr[s].childs;
                this.$set(this.addBol,s,false);
                this.$set(this.addBol,1,true);
                this.$set(this.addBol,2,true);
            }else if(s==1){
                this.aa2=this.aa1[s].childs;
                this.$set(this.addBol,0,true);
                this.$set(this.addBol,1,false);
                this.$set(this.addBol,2,true);
            }else if(s==2){
                this.item3=this.aa2[s].name;
                this.$set(this.addBol,1,true);
                this.$set(this.addBol,0,true);
                this.$set(this.addBol,2,false);
            }
        },
        // 省
      change1(s){
        this.aa1=this.addr[s].childs;
        console.log(this.aa1);
        this.wadd1[1].input[0].oblast=this.addr[s].name;
        this.$set(this.addBol,0,true);
        this.$set(this.addBol,1,true);
        this.$set(this.addBol,2,true);
      },
      // 市
       change2(s){
        this.aa2=this.aa1[s].childs;
        this.wadd1[1].input[1].city=this.aa1[s].name;
        this.$set(this.addBol,0,true);
        this.$set(this.addBol,1,true);
        this.$set(this.addBol,2,true);
       },
       //县
       change3(s){
        this.item3=this.aa2[s].name;
        this.wadd1[1].input[2].country=this.aa2[s].name;
        this.$set(this.addBol,0,true);
        this.$set(this.addBol,1,true);
        this.$set(this.addBol,2,true);
       },
    }

}
</script>

<style scoped>
/* 遮罩 */
.addInsert-listone{
    position: relative;
}
.sanld0,.sanld1,.sanld2{
    position: absolute;
    top: 35px;
    width: 140px;
    height: 200px;
    background-color: #fff;
    overflow:scroll;
    z-index: 4;
}
.sanld0{
    left:166px ;
}
.sanld1{
    left: 326px;
}
.sanld2{
    left: 486px;
}
/* 按钮 */
.one{
    width: 100%;
}
.one h3{
    font-size: 16px;
    margin-left: 166px;
    color: #333;
    line-height: 56px;
}
.one h3 i{
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: 2px;
    height: 16px;
    width: 16px;
    background: url(../../../assets/imgs/green-radio.png) no-repeat 0 0;
    margin-right: 10px;
}
.one h3 i.oneicon{
    background: url(../../../assets/imgs/green-radio.png) no-repeat -24px 0;
}
.one .oneTo{
    font-size: 18px;
    color: #fff;
    margin-left: 166px;
    margin-top: 12px;
}
.one .oneTo span{
    line-height: 35px;
    width: 111px;
    border-radius: 6px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}
.one .oneTo span:nth-child(1){
    background-color: #999;
    margin-right: 124px;

}
.one .oneTo span:nth-child(2){
    background-color: #f08200;
}
/*  */
.addInsert{
    width: 680px;
    height: 422px;
    /* border: 5px solid #e2e2e2; */
    padding: 9px 0;
    text-align: left;
    /* background-color: #f00; */
}
.addInsert>h3{
    line-height: 59px;
    width: calc(100% - 30px);
    padding-left: 30px;
    font-size: 18px;
    color: #498e3d;
    text-align: left;
    border-bottom: 1px solid #e2e2e2;
    /* margin-bottom: 10px; */
}
.addInsert ul li{
    width: 100%;
    height: 35px;
    /* background-color: #00f; */
    margin-top: 20px;
    position: relative;
}
.addInsert ul li label:nth-last-child(n+2){
    float: left;
}
.addInsert ul li span{
    position: relative;
    height: 35px;
    /* background-color: #0f0; */
    float: left;
}
.addInsert ul li input{
    border: 1px solid #d3d3d3;
    height: 33px;
    font-size: 16px;
    padding-left: 10px;
}

.addInsert ul{
    width: 100%;
}
.addInsert ul li:nth-child(1) input{
    width: 315px;
}
.addInsert ul li:nth-child(2) span:nth-child(1){
    width: 100px;
    position: absolute;
    top: 0;
    float: left;
}
.addInsert ul li:nth-child(2) span input{
    margin-right: 20px;
    width: 103px;
    padding-right: 25px;
    cursor: pointer;

}
.addInsert ul li:nth-child(2) em{
    position: absolute;
    height: 10px;
    width: 14px;
    background-color: #f00;
    top: calc(50% - 5px);
    left: 114px;
    background: url(../../../assets/imgs/add-jian.png) no-repeat 0 0;
    cursor: pointer;
}
.addInsert ul li:nth-child(3) input{
    width: 448px;
}
.addInsert ul li:nth-child(4){
    display: inline-block;
    width: 330px;
}
.addInsert ul li:nth-child(5){
    display: inline-block;
    width: 300px;
}

.addInsert ul li:nth-child(4) input{
    width: 140px;
}
.addInsert ul li:nth-child(5) label{
   margin-right: 10px;
}
.addInsert ul li:nth-child(5) .gphone1{
    width: 45px;
}
.addInsert ul li:nth-child(5) .gphone2{
    width: 120px;
}
.addInsert ul li:nth-child(5) i{
    margin-right: 3px;
}
.addInsert ul li:nth-last-child(n+2) label.addInsert-label{
    display: inline-block;
    width: 146px;
    line-height: 35px;
    font-size: 18px;
    color: #333;
    /* background-color: #f00; */
    text-align: right;
    padding-right: 20px;
}
.addInsert ul li:nth-child(5){
    line-height: 33px;
}
.addInsert-listone .addInsert-label i{
    color: #f00;
}
.clearfix::after{
    content: '';
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}
.clearfix{
    *zoom: 1;
}
</style>